<template>
  <div 
    class="fullpage-container" 
    @wheel.prevent="handleScroll"
    ref="container"
  >
    <div class="section">
      <Carousel />
    </div>
    <div class="section school-intro">
      <button class="enroll-button">报名入口</button>
      <div class="school-content">
        <h1 class="school-title">学校简介</h1>
        <div class="info-container">
          <div class="info-card">
            <img src="https://picsum.photos/400/250?random=1" class="info-image" alt="学校图片" />
            <div class="info-text">
              <h2 class="info-title">专注信息学奥赛教育</h2>
              <p class="info-description">湖北奥航教育咨询有限公司致力于为中小学生提供专业的信息学奥林匹克竞赛（NOIP）培训与指导服务，培养青少年的编程思维和算法能力。</p>
            </div>
          </div>
          <div class="info-card">
            <img src="https://picsum.photos/400/250?random=2" class="info-image" alt="学校图片" />
            <div class="info-text">
              <h2 class="info-title">本土化教育支持</h2>
              <p class="info-description">专注本地区信息学人才培养，为学生提供系统的编程算法培训和竞赛规划支持，助力学生参与信息学竞赛活动，培养科技创新人才。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section competition-info">
      <div class="school-content">
        <h1 class="school-title">竞赛介绍</h1>
        <div class="info-container">
          <div class="info-card competition-card">
            <div class="info-text">
              <h2 class="info-title">权威赛事平台</h2>
              <p class="info-description">NOIP是由中国计算机学会主办的全国性青少年信息学竞赛，旨在培养计算机科学后备人才，提升青少年计算思维和创新能力。</p>
            </div>
            <img src="https://picsum.photos/400/250?random=3" alt="竞赛图片" class="info-image" />
          </div>
          <div class="info-card competition-card">
            <div class="info-text">
              <h2 class="info-title">分级竞赛体系</h2>
              <p class="info-description">竞赛分为普及组和提高组，面向初中和高中学生，通过算法设计、程序实现等环节，全面考察选手的计算思维和问题解决能力。</p>
            </div>
            <img src="https://picsum.photos/400/250?random=4" alt="竞赛图片" class="info-image" />
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="footer-content">
        <div class="contact-info">
          <h3>联系我们</h3>
          <p>地址：武汉市洪山区珞南街道珞喻路289号</p>
          <p>电话：123456</p>
          <p>邮箱：123456@qq.com</p>
        </div>
        <div class="copyright">
          <p>© 2025 湖北奥航教育咨询有限公司 版权所有</p>
          <p>ICP备案号：鄂ICP备0000000号-0</p>
          <p>公网安备案号：鄂公网安备 0000000号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Carousel from './components/Carousel.vue'

const container = ref<HTMLDivElement | null>(null)
const currentSection = ref(0)
let isScrolling = false

const sections = [
  { id: 'carousel' },
  { id: 'school-intro' },
  { id: 'competition-info' },
  { id: 'footer' }
]

const handleScroll = (event: WheelEvent) => {
  if (isScrolling || !container.value) return
  
  isScrolling = true
  
  if (event.deltaY > 0) {
    // 向下滚动
    if (currentSection.value < sections.length - 1) {
      currentSection.value++
    }
  } else {
    // 向上滚动
    if (currentSection.value > 0) {
      currentSection.value--
    }
  }
  
  scrollToSection(currentSection.value)
  
  setTimeout(() => {
    isScrolling = false
  }, 800)
}

const scrollToSection = (index: number) => {
  if (!container.value) return
  
  const sectionHeight = window.innerHeight
  container.value.scrollTo({
    top: index * sectionHeight,
    behavior: 'smooth'
  })
}

// 处理键盘事件
const handleKeydown = (event: KeyboardEvent) => {
  if (isScrolling) return
  
  switch (event.key) {
    case 'ArrowDown':
      event.preventDefault()
      if (currentSection.value < sections.length - 1) {
        currentSection.value++
        scrollToSection(currentSection.value)
      }
      break
    case 'ArrowUp':
      event.preventDefault()
      if (currentSection.value > 0) {
        currentSection.value--
        scrollToSection(currentSection.value)
      }
      break
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.fullpage-container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  scroll-snap-align: start;
}

.school-intro {
  background-color: #f0f0f0;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 20px;
}

.competition-info {
  background-color: #ffffff;
}

.school-content {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enroll-button {
  width: 95%;
  padding: 15px;
  font-size: 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 auto 20px auto;
  transition: background-color 0.3s;
  align-self: center;
}

.enroll-button:hover {
  background-color: #0056b3;
}

.school-title {
  font-size: 2.5rem;
  margin: 0 0 30px 0;
  color: #333;
  text-align: center;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.info-card {
  display: flex;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.competition-card {
  flex-direction: row-reverse;
}

.info-image {
  width: 400px;
  height: 250px;
  object-fit: cover;
  padding: 20px;
}

.info-text {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.info-title {
  font-size: 1.8rem;
  margin: 0 0 15px 0;
  color: #333;
}

.info-description {
  font-size: 1.1rem;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

.footer {
  width: 100vw;
  background-color: #333;
  color: white;
  padding: 30px 0;
  scroll-snap-align: start;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.contact-info h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.contact-info p {
  margin: 5px 0;
}

.copyright {
  text-align: left;
}

.copyright p {
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .school-content {
    padding: 0 15px 15px 15px;
  }
  
  .enroll-button {
    font-size: 1.2rem;
    padding: 12px;
  }
  
  .school-title {
    font-size: 2rem;
    margin: 0 0 20px 0;
  }
  
  .info-card {
    flex-direction: column;
  }
  
  .competition-card {
    flex-direction: column;
  }
  
  .info-image {
    width: 100%;
    height: 250px;
    padding: 15px;
  }
  
  .info-text {
    padding: 15px;
  }
  
  .info-title {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .contact-info {
    margin-bottom: 20px;
  }
  
  .copyright {
    text-align: center;
  }
}
</style>